<!--  -->
<template>
   <div class="boxOffice">
      <div class="header">
          <van-nav-bar
             title="傲慢与偏见"
             left-arrow
             @click-left="onClickLeft"
          />
      </div>
      <div class="content">
          <div class="actnumDetail">
              <div class="actnumDetail1">
                  <p class="col">2</p>
                  <p>今日票房排行</p>
              </div>
              <div class="actnumDetail1">
                  <p>暂无</p>
                  <p>首周票房（万）</p>
              </div>
              <div class="actnumDetail1">
                  <p class="col">2660</p>
                  <p>今日票房排行</p>
              </div>
          </div>
         <div class="line"></div>
         <div class="overall">
             <div class="movieoverall">总票房</div>
             <div class="all">
                  <div class="moviedetail">
                 <p>地区</p>
                 <p>中国</p>
             </div>
             <div class="moviedetail">
                 <p>每周末票房</p>
                 <p>暂无数据</p>
             </div>
             <div class="moviedetail">
                 <p>总票房</p>
                 <p>501万元</p>
             </div>
             </div>
         </div>
        <div class="line"></div>
        <div class="overall">
             <div class="movieoverall">
                  <div>日票房明细</div>
                  <div>单位：万元</div>
             </div>
             <div class="all">
                <div class="moviedetail">
                    <p>日期</p>
                    <p>2018-05-18</p>
                    <p>2018-05-17</p>
                </div>
                <div class="moviedetail">
                    <p>当日票房</p>
                    <p>538.6</p>
                    <p>--</p>
                </div>
                <div class="moviedetail">
                    <p>票房占比</p>
                    <p>8.3%</p>
                    <p>2</p>
                </div>
                <div class="moviedetail">
                    <p>票房占比</p>
                    <p>8.3%</p>
                    <p>0.0%</p>
                </div>
                <div class="moviedetail">
                    <p>票房占比</p>
                    <p>3</p>
                    <p>0</p>
                </div>
             </div>
         </div>
      </div>
   </div>
</template>

<script>
export default {
 data() {
   return {
     list:[{
         num:"538.6",
         data:"--"
     },
     {
         num:"8.3%",
         data:"--"
     },
     {
         num:"21.3%",
         data:"0.0%"
     },
     {
         num:"3",
         data:"0"
     }]
   }
 },
 methods:{
   onClickLeft(){
       this.$router.go(-1)
   }
 },
 created() {
 
 },
 mounted() {
 
 }
}
</script>
<style scoped lang='scss'>
    .boxOffice{
         background-color:#22262D;
         height: calc(100vh);
    }
     [class*=van-hairline]::after{
     border: 0 solid transparent;
   }
    /deep/  .van-nav-bar .van-icon{
    color: #fff;
    }
    /deep/  .van-ellipsis{
    color: #fff;
    font-Size:32px
    }
  .van-nav-bar{
      background-color: transparent;
  }
        
  .header{
      margin:0 40px;
      padding-top: 22px;
  }
  .actnumDetail{
       margin:55px 40px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .actnumDetail1{
             text-align: center;
             color: #FFFFFF;
            .col{
                color: #FBC34A;
            }
            p:nth-child(1){
               font-size: 36px;
            }
            p:nth-child(2){
                font-size: 24px;
                opacity: 0.45;
            }
        }
  }
  .line{
        background: #33363D;
        width: 750px;
        height: 12px;
        margin-bottom: 38px;
        margin-top: 25px;
  }
  .overall{
       margin: 0 40px;
      .movieoverall{
        display: flex;
        justify-content: space-between;
         color: #FFFFFF;
        div:nth-child(1){
           font-size: 32px;
           line-height: 36px;
           margin-bottom: 60px;
        }
        div:nth-child(2){
            opacity: 0.45;
            font-size: 24px;
            line-height: 24px;
        }
      }
      .all{
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      .moviedetail{
          font-size: 24px;
          color: #FFFFFF;
          text-align: center;
          p:nth-child(1){
              opacity: 0.45;
              line-height: 24px;
              padding-bottom: 42px;
          }
          p:nth-child(2){
              opacity: 0.83;
              line-height: 24px;
          }
          p:nth-child(3){
              margin-top: 40px;
          }
      }
}
    
</style>